<template>

  <div class="contain-all">

    <TopSpace :is-admin="isAdmin" @clickLogin="handlerLoginClick" :user="AdminName"
              @selectClick="handlerDropMenuSelect" @logout="handlerLogout"></TopSpace>

    <div class="left-menu" v-if="isAdmin">
      <MenuList :menu-list="menuList" @clickMenu="handlerMenuClick">
      </MenuList>
    </div>
    <div class="text-contain" v-if="isAdmin">

      <Table1 v-if="selectMenu==='住户列表'" :head="houseHeadAlias" :data="houseData"
              class="contain-table" @tableChange="handlerUserTableChange">
      </Table1>
      <Text1 v-else-if="selectMenu==='个人信息'" class="contain-text" :obj="selfInformation"></Text1>

      <Table2 v-else-if="selectMenu==='楼栋列表'" :head="buildingHeadAlias" :data="buildingData"
              class="contain-table" @tableChange="handlerBuildTableChange">
      </Table2>

      <Table3 v-else-if="selectMenu==='管理员列表'" :head="adminHeadAlias" :data="adminData"
              class="contain-table" @tableChange="handlerAdminTableChange">
      </Table3>

      <Table4 v-else-if="selectMenu==='疫情打卡列表'" :head="punchHeadAlias" :data="punchData"
              class="contain-table" @tableChange="handlerPunchTableChange">
      </Table4>

      <Table5 v-else-if="selectMenu==='体检信息列表'" :head="bodyHeadAlias" :data="bodyData"
              class="contain-table" @tableChange="handlerBodyTableChange">
      </Table5>

      <Table6 v-else-if="selectMenu==='健康新闻列表'" :head="healthHead" :data="healthData"
              class="contain-table" @tableChange="handlerHealthTableChange">
      </Table6>

      <Table7 v-else-if="selectMenu==='活动列表'" :head="activeHead" :data="activeData"
              class="contain-table" @tableChange="handlerActiveTableChange">
      </Table7>

      <Table8 v-else-if="selectMenu==='已选活动列表'" :head="activedHead" :data="activedData"
              class="contain-table" @tableChange="handlerActivedTableChange">
      </Table8>

      <Table9 v-else-if="selectMenu==='活动签到列表'" :head="signHead" :data="signData"
              class="contain-table" @tableChange="handlerSignTableChange">
      </Table9>

      <Table10 v-else-if="selectMenu==='活动成绩列表'" :head="scoreHead" :data="scoreData"
               class="contain-table" @tableChange="handlerScoreTableChange">
      </Table10>

      <Table v-else-if="selectMenu==='活动成绩统计'" :head="tableHead" :data="tableData"
             class="contain-table" @tableChange="handlerTableChange">
      </Table>

      <ChangePwd v-else-if="selectMenu==='修改密码'" class="contain-table" @updatePwd="">
      </ChangePwd>

    </div>
    <LoginBlock v-if="isShowLogin" class="login" @register="isShowLogin = false;isShowRegister=true;"
                @loginSuccess="loginAfter"
    ></LoginBlock>

    <RegisterBlock v-if="isShowRegister" class="register" :type="registerType"
                   @login="isShowRegister=false;isShowLogin=true" @cancel="isShowRegister=false">
    </RegisterBlock>

  </div>

</template>

<script>
import MenuList from "./components/MenuList";
import TopSpace from "./components/TopSpace";
import LoginBlock from "@/components/LoginBlock";
import TextList from "@/components/TextList";
import Table from "@/components/Table";
import Table1 from "@/components/Table1";
import Table2 from "@/components/Table2";
import Table3 from "@/components/Table3";
import Table4 from "@/components/Table4";
import Table5 from "@/components/Table5";
import Table6 from "@/components/Table6";
import Table7 from "@/components/Table7";
import Table8 from "@/components/Table8";
import Table9 from "@/components/Table9";
import Table10 from "@/components/Table10";
import ChangePwd from "@/components/ChangePwd";
import utils from "@/utils/utils";
import RegisterBlock from "@/components/RegisterBlock";
import Text1 from "@/components/Text1";
import axios from "axios";
import {HOST} from "@/utils/constant";

export default {
  name: 'App',
  components: {
    MenuList,
    TopSpace,
    LoginBlock,
    TextList,
    //同一组件多次实例化，data数据污染
    Table,
    Table1,
    Table2,
    Table3,
    Table4,
    Table5,
    Table6,
    Table7,
    Table8,
    Table9,
    Table10,
    ChangePwd,
    RegisterBlock,
    Text1,
  },
  data() {
    return {
      menuList: [],
      textList: [],
      selectMenu: '表格',
      isShowLogin: true,
      isAdmin: false,
      isShowRegister: false,
      AdminName: '',
      AdminType: '',
      selfInformation: {},
      registerType: '0',

      //住户列表
      houseHead: [],
      houseHeadAlias: [],
      houseData: [],

      //楼栋列表
      buildingHead: [],
      buildingHeadAlias: [],
      buildingData: [],

      //管理员列表
      adminHead: [],
      adminHeadAlias: [],
      adminData: [],

      //疫情打卡列表
      punchHead: [],
      punchHeadAlias: [],
      punchData: [],

      //体检信息列表
      bodyHead: [],
      bodyHeadAlias: [],
      bodyData: [],

      //健康新闻列表
      healthHead: [],
      healthHeadAlias: [],
      healthData: [],

      //活动列表
      activeHead: [],
      activeHeadAlias: [],
      activeData: [],

      //已选活动列表
      activedHead: [],
      activedHeadAlias: [],
      activedData: [],

      //活动签到列表
      signHead: [],
      signHeadAlias: [],
      signData: [],

      //活动成绩列表
      scoreHead: [],
      scoreHeadAlias: [],
      scoreData: [],

    };
  },
  async created() {
    //构造时异步获取数据
  },
  methods: {
    handlerLogout() {
      this.isAdmin = false;
      this.isShowLogin = true;
      this.selectMenu = '';
      this.menuList = [];
      axios.post(HOST + '/admin/logout').then(response => {
        console.log(response.data);
      }).catch(err => {
        console.log(err);
      })
    }
    ,
    loginAfter() {
      this.isAdmin = true;
      this.isShowLogin = this.isShowRegister = false;
      this.AdminName = '你好! ' + sessionStorage.getItem('username');
      this.AdminType = sessionStorage.getItem('type');
      if (this.AdminType === '0') {
        //用户
        this.menuList = [
          {id: 0, name: '住户信息管理', child: [{name: '个人信息'}]},
          {id: 1, name: '楼栋信息管理', child: [{name: '楼栋列表'}]},
          {id: 2, name: '管理员信息管理', child: [{name: '管理员列表'}]},
          {id: 3, name: '疫情打卡信息管理', child: [{name: '个人打卡'}]},
          {id: 4, name: '体检信息管理', child: [{name: '体检信息列表'}]},
          {id: 5, name: '健康新闻管理', child: [{name: '健康新闻列表'}]},
          {id: 6, name: '活动信息管理', child: [{name: '活动列表'}]},
          {id: 7, name: '已选活动信息管理', child: [{name: '已选活动列表'}]},
          {id: 8, name: '活动签到信息管理', child: [{name: '活动签到列表'}]},
          {id: 9, name: '活动成绩信息管理', child: [{name: '活动成绩列表'}, {name: '活动成绩统计'}]},
          {id: 10, name: '系统管理', child: [{name: '修改密码'}]},]
      } else if (this.AdminType === '1') {
        //超级管理员
        this.menuList = [
          {id: 0, name: '住户信息管理', child: [{name: '住户列表'}]},
          {id: 1, name: '楼栋信息管理', child: [{name: '楼栋列表'}]},
          {id: 2, name: '管理员信息管理', child: [{name: '管理员列表'}]},
          {id: 3, name: '疫情打卡信息管理', child: [{name: '疫情打卡列表'}]},
          {id: 4, name: '体检信息管理', child: [{name: '体检信息列表'}]},
          {id: 5, name: '健康新闻管理', child: [{name: '健康新闻列表'}]},
          {id: 6, name: '活动信息管理', child: [{name: '活动列表'}]},
          {id: 7, name: '已选活动信息管理', child: [{name: '已选活动列表'}]},
          {id: 8, name: '活动签到信息管理', child: [{name: '活动签到列表'}]},
          {id: 9, name: '活动成绩信息管理', child: [{name: '活动成绩列表'}, {name: '活动成绩统计'}]},
          {id: 10, name: '系统管理', child: [{name: '修改密码'}]},
        ]
      } else {
        this.menuList = [
          {id: 0, name: '住户信息管理', child: [{name: '住户列表'}, {name: '个人信息'},]},
          {id: 1, name: '楼栋信息管理', child: [{name: '楼栋列表'}]},
          {id: 2, name: '管理员信息管理', child: [{name: '管理员列表'}]},
          {id: 3, name: '疫情打卡信息管理', child: [{name: '疫情打卡列表'}]},
          {id: 4, name: '体检信息管理', child: [{name: '体检信息列表'}]},
          {id: 5, name: '健康新闻管理', child: [{name: '健康新闻列表'}]},
          {id: 6, name: '活动信息管理', child: [{name: '活动列表'}]},
          {id: 7, name: '已选活动信息管理', child: [{name: '已选活动列表'}]},
          {id: 8, name: '活动签到信息管理', child: [{name: '活动签到列表'}]},
          {id: 9, name: '活动成绩信息管理', child: [{name: '活动成绩列表'}, {name: '活动成绩统计'}]},
          {id: 10, name: '系统管理', child: [{name: '修改密码'}]},
        ]
      }
    },
    /*一系列表格改变事件*/
    handlerPunchTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '', '/delete/Record', '/update/Record', this.punchHead, this.punchData);
    },
    handlerAdminTableChange(data) {
      this.GeneralPostUpdate(data, 'managerId', HOST, '/insert/Manager', '/delete/Manager', '/update/Manager', this.adminHead, this.adminData);
    },
    handlerUserTableChange(data) {
      this.GeneralPostUpdate(data, 'userId', HOST, '', '/delete/user', '/update/user', this.houseHead, this.houseData);
    },
    handlerBuildTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '/insert/house', '/delete/house', '/update/house', this.buildingHead, this.buildingData);
    },
    handlerBodyTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '/insert/Physical', '/delete/Physical', '/update/Physical', this.bodyHead, this.bodyData);
    },
    handlerHealthTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '/insert/News', '/delete/News', '/update/News', this.healthHead, this.healthData);
    },
    handlerActiveTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '/insert/active', '/delete/active', '/update/active', this.activeHead, this.activedData);
    },
    handlerActivedTableChange(data) {
      this.GeneralPostUpdate(data, 'id', HOST, '', '', '', this.activedHead, this.activedData);
    },
    handlerSignTableChange(data){
      this.GeneralPostUpdate(data, 'id', HOST, '', '/delete/active_more', '/update/active_more', this.signHead, this.signData);
    },
    handlerScoreTableChange(data){
      this.GeneralPostUpdate(data, 'id', HOST, '', '/delete/active_more', '/update/active_more', this.scoreHead, this.scoreData);
    },
    handlerMenuClick(item) {
      const params = new URLSearchParams();

      //处理点击事件
      switch (item.name) {
        case '个人信息':
          this.selectMenu = '个人信息';
          let url = '';
          if (sessionStorage.getItem('type') === '0') {
            url = HOST + '/select/user/self';
            params.append('mapString', '{userId:' + sessionStorage.getItem('userId') + '}')
          } else {
            url = HOST + '/select/Manager/self';
            params.append('mapString', '{managerId:' + sessionStorage.getItem('managerId') + '}')
          }

          axios.post(url, params, {
            timeout: 5000,
          }).then(response => {
            const obj = {};
            console.log(response.data);
            obj.name = response.data.data.name;
            obj.sex = response.data.data.sex;
            obj.username = response.data.data.userName;
            obj.phone = response.data.data.mobile;
            obj.house = response.data.data.roomName;
            obj.qq = response.data.data.qq;
            obj.photo = response.data.data.photo;
            obj.houseName = response.data.data.houseName;
            this.selfInformation = obj;
          }).catch(err => {
            console.log(err);
          })
          return;
        case "住户列表":
          this.selectMenu = "住户列表";
          let map = '';
          if (sessionStorage.getItem('type') === '2') {
            //楼栋管理员
            map = '{houseId:' + sessionStorage.getItem('houseId') + '}';
          } else {
            //超级管理员
            map = '';
          }
          this.GeneralPostTableData(HOST + "/select/user", 'userId', map).then(result => {
            this.houseHead = result.tableHead;
            this.houseData = result.tableData;
            this.houseHeadAlias = ['userId', 'houseId', '用户名', '姓名', '电话', '头像', '性别', 'QQ', '房间', '楼栋'];
          });
          break;
        case "楼栋列表":
          this.selectMenu = "楼栋列表";
          this.GeneralPostTableData(HOST + "/select/house", 'id', '').then(result => {
            this.buildingHead = result.tableHead;
            this.buildingHeadAlias = ['id', '楼栋名', '编号', '备注'];
            this.buildingData = result.tableData;
          });
          break;
        case "管理员列表":
          this.selectMenu = "管理员列表";
          this.GeneralPostTableData(HOST + "/select/Manager", 'managerId', '').then(result => {
            this.adminHead = result.tableHead;
            this.adminHeadAlias = ['managerId', 'houseId', '用户名', '姓名', '电话', '头像', 'QQ', '性别', '楼栋', '备注'];
            this.adminData = result.tableData;
          });
          break;
        case "疫情打卡列表":
          this.selectMenu = "疫情打卡列表";
          this.GeneralPostTableData(HOST + "/select/Record", 'id', '').then(result => {
            this.punchHead = result.tableHead;
            this.punchHeadAlias = ['id', 'pid', '姓名', '是否打卡', '体温是否正常', '是否接触高风险地区', '是否接触确诊病人', '是否流鼻涕等症状', '现住地区是否有确诊', '备注', '打卡时间'];
            this.punchData = result.tableData;
          });
          break;
        case "体检信息列表":
          this.selectMenu = "体检信息列表";
          let map1 = '';
          if (sessionStorage.getItem('type') === '2') {
            map1 = '{houseId:' + sessionStorage.getItem('houseId') + '}';
          }
          if (sessionStorage.getItem('type') === '0') {
            map1 = '{userId:' + sessionStorage.getItem('userId') + '}';
          }
          this.GeneralPostTableData(HOST + "/select/Physical", 'id', map1).then(result => {
            this.bodyHead = result.tableHead;
            this.bodyData = result.tableData;
            this.bodyHeadAlias = ['id', 'pid', '用户名', '舒张压', '收缩压', '体重', '腰臀比', '尿素', '尿酸', '甘油二醇', '胆固醇', '葡萄糖', '蛋白质', '用户标识', '记录时间']
          })
          break;
        case "健康新闻列表":
          this.selectMenu = "健康新闻列表";
          this.GeneralPostTableData(HOST + "/select/News", 'id', '').then(result => {
            this.healthHead = result.tableHead;
            this.healthData = result.tableData;
          })
          break;
        case "活动列表":
          this.selectMenu = "活动列表";
          this.GeneralPostTableData(HOST + "/select/avtivity", 'id', '').then(result => {
            this.activeHead = result.tableHead;
            this.activeData = result.tableData;
            this.activeHeadAlias = [];
          })
          break;
        case "已选活动列表":
          this.selectMenu = "已选活动列表";
          this.GeneralPostTableData(HOST + "/select/activity_more", 'id', '').then(result => {
            this.activedHead = result.tableHead;
            this.activedData = result.tableData;
            this.activedHeadAlias = [];
          })
          break;
        case "活动签到列表":
          this.selectMenu = "活动签到列表";
          this.GeneralPostTableData(HOST + "/select/activity_more", 'id', '').then(result => {
            this.signHead = result.tableHead;
            this.signData = result.tableData;
            this.signHeadAlias = [];
          })
          break;
        case "活动成绩列表":
          this.selectMenu = "活动成绩列表";
          this.GeneralPostTableData(HOST + "/select/activity_more", 'id', '').then(result => {
            this.scoreHead = result.tableHead;
            this.scoreData = result.tableData;
            this.scoreHeadAlias = [];
          })
          break;
        case "活动成绩统计":
          this.selectMenu = "活动成绩统计";
          break;
        case "修改密码":
          this.selectMenu = "修改密码";
          break;
      }
    },
    handlerLoginClick() {
      //显示登陆
      this.isShowLogin = true;
    },

    handlerDropMenuSelect(select) {
      //处理下拉菜单
      if (select === '退出登陆') {
        this.isAdmin = false;
      }
      console.log(select);
    },
    handlerTableChange(data) {
      for (const d of data) {
        console.log(d);
      }
      // console.log(data);
    },

    changePwd(newPwd) {
      var username = sessionStorage.getItem('username');
      //传给后端新密码
      console.log(username, newPwd);
    },

    /*通用post方法*/
    GeneralPostUpdate(data, strId, host, add, remove, update, tableHead, tableData) {
      if (data[0] === 'add') {
        let obj = {};
        for (let i = 0; i < tableHead.length; i++) {
          obj[tableHead[i]] = data[1][i] === '' ? null : data[1][i];
        }

        console.log(obj);
        //发给后端
        axios.post(host + add, obj, {
          timeout: 5000,
        }).then(response => {
          console.log(response);
          alert(response.data.message);
        }).catch(err => {
          alert(err);
          console.log(err);
        })

      }
      if (data[0] === 'delete') {
        for (let i = 1; i < data.length; i++) {
          let params = new URLSearchParams();
          params.append(strId, data[i][0])
          axios.post(host + remove, params, {
            timeout: 5000,
          }).then(response => {
            console.log(response.data);
            alert(response.data.message);
          }).catch(err => {
            alert(err);
            console.log(err);
          })
        }
        return;
      }
      if (data[0] === 'update') {
        let arr = [];
        for (let i = 1; i < data.length; i++) {
          let temp_i = parseInt(data[i]['row']);
          let temp_j = parseInt(data[i]['col']) + 2;
          tableData[temp_i]['data'][temp_j] = data[i]['value'];
          arr.indexOf(temp_i) === -1 ? arr.push(temp_i) : '';
        }

        //发给后端
        for (let i = 0; i < arr.length; i++) {
          let id = arr[i];
          let obj = {};
          for (let j = 0; j < tableHead.length; j++) {
            obj[tableHead[j]] = tableData[id]['data'][j];
          }
          console.log(obj);

          axios.post(host + update, obj, {
            timeout: 5000,
          }).then(response => {
            console.log(response);
            if (i === arr.length - 1) {
              alert(response.data.message);
            }
          }).catch(err => {
            alert(err);
            console.log(err);
          })
        }
      }
    },
    /*通用获取数据方法*/
    GeneralPostTableData(url, strId, map) {
      let params = new URLSearchParams();
      params.append('mapString', map);
      return axios.post(url, params, {
        timeout: 5000,
      }).then(response => {
        console.log(response);
        const table = utils.transToTableData(response.data.data, strId);
        if (table === {}) return;

        return {
          'tableHead': table.tableHead,
          'tableData': table.tableData,
        }
      }).catch(err => {
        alert(err);
        console.log(err);
      });
    }
  }
}
</script>

<style scoped>

.left-menu {
  width: 200px;
  position: absolute;
  left: 5px;
  top: 50px;
  /*background-image: url("./assets/menu-left2.png");*/
}

.contain-all {
  width: 100%;
  height: 1500px;
  background-image: url("./assets/background1.png");
  background-size: 100% 100%;
}

.login {
  position: fixed;
  left: 480px;
  top: 200px;
  opacity: 1;
}

.register {
  position: fixed;
  left: 480px;
  top: 100px;
  opacity: 1;
  height: 500px;
}

.text-contain {
  border: 1px solid;
  position: absolute;
  border-radius: 5px;
  left: 225px;
  top: 100px;
  width: 1200px;
  height: 1500px;
}

.contain-table {
  position: relative;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
}

.contain-text {
  position: relative;
  top: 1px;
  left: 10px;
  width: 98%;
  height: 98%;
}
</style>
